dataZoom

dataZoom 组件 用于区域缩放，从而能自由关注细节的数据信息，或者概览数据整体，或者去除离群点的影响。type为inside时依赖于grid。

组件详细配置项如下，每个配置项都有一个默认值：

        $gridIndex: 0, // {number|Array<number>} 依赖的gridIndex，事件将加在该grid内，可以为数组，在多个grid中添加事件
        type: 'inside', // {string} 缩放类型 inside | slider

        // slider类型的dataZoom位置
        left: '10%', // {string|number} 左
        right: '10%', // {string|number} 右
        top: undefined, // {string|number} 顶
        bottom: '3%', // {string|number} 底
        width: undefined, // {string|number} 宽
        height: 25, // {string|number} 高

        // 背景设置
        background: {
            show: true, // {boolean} 是否显示背景
            style: {
                fill: 'rgba(47,69,84,0)',
                stroke: '#ddd',
                lineWidth: 1
            }
        },

        seriesIndex: 0, // {number} 关联的series的index（需注意无$符），用于在dataBackGround中绘制背景

        // 以seriesIndex关联的series绘制数据背景，仅支持以折线绘制
        dataBackground: {
            show: false, // {boolean} 是否显示数据背景
            // 折线配置
            line: {
                show: true, // {boolean} 是否以折线显示
                style: {
                    stroke: 'rgba(47,69,84,0.3)',
                    lineWidth: 0.5
                }
            },
            // 区域配置
            area: {
                show: true, // {boolean} 是否以区域显示
                style: {
                    fill: 'rgba(47,69,84,0.1)'
                }
            }
        },

        // handler两侧label
        label: {
            show: false, // {Boolean} 在拖拽条两边显示推拽位置信息
            formatter: d => d, // {Function} 格式整理
            // 标签样式
            style: {}
        },

        // 填充块配置
        filler: {
            show: true, // {Boolean} 是否显示填充块
            type: 'rect', // {String} 显示样式
            style: {
                fill: 'rgba(167,183,204,0.4)',
                stroke: '#ddd'
            }
        },

        // 手柄配置
        handler: {
            show: true, // 是否显示手柄
            type:
                'path://M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z', // {String} 显示类型，支持svg的path
            size: [10, '100%'], // {Array} 控制手柄的尺寸，可以是像素大小，也可以是相对于 dataZoom 组件宽度的百分比，默认跟 dataZoom 宽度相同。
            style: {
                fill: '#a7b7cc',
                stroke: '#000',
                lineWidth: 0
            }
        },

        start: '0%', // {String} 数据窗口范围的起始百分比。
        end: '100%', // {String} 数据窗口范围的结束百分比。

        minSpan: null, // {Number} 用于限制窗口大小的最小值 0 ~ 1
        maxSpan: null, // {Number} 用于限制窗口大小的最大值 0 ~ 1

        zoomOnMouseWheel: true, // {Boolean} 滚轮是否触发数据缩放
        moveOnMouseMove: true, // {Boolean} 鼠标拖拽移动是否触发数据平移
        preventDefaultMouseMove: false, // {Boolean} 是否阻止 mousemove 事件的默认行为。
        preventDefaultMouseWheel: true, // {Boolean} 是否阻止 mousewheel 事件的默认行为。

        orient: 'horizontal', // {String} 触发数据平移的拖拽移动事件方向 horizontal | vertical

        zlevel: 0, // {number} 所有图形的 zlevel 值
        z: 8 // {number} 组件的所有图形的z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。